<template>
    <div class="wrap">
        <!--  头部  -->
        <am-tabs
          v-model="selected"
          @change="change"
          :tabs="['消费明细', '账户变动']"/>
        <list ref="list" :showRefresh="true" @refresh="onrefresh">
          <cell class="cell" v-for="bean in lists">
            <Simple4Cell v-bind:bean="bean"/>
          </cell>
        </list>
    </div>
</template>
<script>
    var globalEvent = weex.requireModule('globalEvent');
    var modal = weex.requireModule('bmModal');
    import Simple4Cell from '../component/simple4cell';
    import { AmTabs } from 'weex-amui';
    module.exports = {
        data() {
          return {
            urls: ["https://888.ph100.cn/userOrder","https://888.ph100.cn/userMnyChg"],
            beanname: ["myorder","myPrizeChg"],
            selected: 0,
            lists: []
          }
        },
        components: {
          AmTabs,Simple4Cell
        },
        methods: {
            onrefresh() {
                this.$refs["list"].refreshEnd()
            },
            change(index, value){
              this.loadData();
            },
            loadData(){
              this.$notice.loading.show("loading");
              this.$fetch({
                method: 'GET',    // 大写
                url: this.urls[this.selected], //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                  page: 1,
                  page_size: 8
                }
              }).then(resData => {
                // 成功回调
                console.log(resData);
                this.lists = resData[this.beanname[this.selected]];
                this.$notice.loading.hide();
              }, error => {
                // 错误回调
                console.log(error);
                modal.toast({
                  message:error
                });
                this.$notice.loading.hide();
              });
            }
        },
        created: function() {
          this.loadData();
        }
    }
</script>
<style scoped>
  .panel {
    width: 600px;
    height: 250px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
</style>
